<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    width="700px"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      :rules="rules"
      :disabled="dialogObj.read"
      v-if="dialogObj.show"
      status-icon
    >
      <el-form-item label="客户账号：" prop="loginAccount">
        <el-input
          v-model="form.loginAccount"
          style="width:200px;"
          size="mini"
          maxlength="20"
          :disabled="dialogObj.id != ''"
          :placeholder="placeholderTips.userName"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="密码："
        prop="loginPassword"
        v-if="dialogObj.id == ''"
      >
        <el-input
          v-model="form.loginPassword"
          style="width:200px;"
          size="mini"
          maxlength="20"
          :placeholder="placeholderTips.password"
        ></el-input>
      </el-form-item>
      <el-form-item label="客户名称：" prop="customerName">
        <el-input
          v-model="form.customerName"
          style="width:200px;"
          size="mini"
          maxlength="50"
          :placeholder="placeholderTips.customerName"
        ></el-input>
      </el-form-item>
      <el-form-item label="统一社会信用代码：" prop="customerCode">
        <el-input
          v-model="form.customerCode"
          style="width:200px;"
          size="mini"
          maxlength="20"
          :placeholder="placeholderTips.customerCode"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="customerPhone">
        <el-input
          v-model="form.customerPhone"
          style="width:200px;"
          size="mini"
          maxlength="20"
          :placeholder="placeholderTips.customerPhone"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" prop="customerEmail">
        <el-input
          v-model="form.customerEmail"
          style="width:200px;"
          size="mini"
          maxlength="50"
        ></el-input>
      </el-form-item>
      <el-form-item label="经常居所地或营业所所在地：" prop="customerCity">
        <el-input
          v-model="form.customerCity"
          style="width:200px;"
          size="mini"
          maxlength="50"
        ></el-input>
      </el-form-item>
      <el-form-item label="详细地址：" prop="customerAddress">
        <el-input
          v-model="form.customerAddress"
          style="width:400px;"
          size="mini"
          maxlength="200"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮政编码：" prop="customerPostcode">
        <el-input
          v-model="form.customerPostcode"
          style="width:200px;"
          size="mini"
          maxlength="6"
        ></el-input>
      </el-form-item>

          <el-form-item label="爬虫登录名：" prop="crawlerLoginName">
        <el-input
          v-model="form.crawlerLoginName"
          style="width:200px;"
          size="mini"
        ></el-input>
      </el-form-item>

          <el-form-item label="爬虫密码：" prop="crawlerPassword">
        <el-input
          v-model="form.crawlerPassword"
          style="width:200px;"
          size="mini"
        ></el-input>
      </el-form-item>


      <el-form-item label="备注（联系人）：" prop="remark">
        <el-input
          type="textarea"
          v-model="form.remark"
          style="width:400px;"
          maxlength="500"
          size="mini"
        ></el-input>
      </el-form-item>
         <el-form-item label="爬取主题展示：">
       <el-select v-model="form.subjectIds" multiple  style="width:400px;" placeholder="请选择">
              <el-option
                v-for="item in subjectIdList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
         </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogObj.show = false" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { _debounce } from "@u/debounce";
import {
  placeholderTips,
  validateUserName,
  validatePhone,
  validateUserPassword,
  validateTemplate,
  validateName,
  validateEmail
} from "./validate";
import { AddCustomerApi, updateCustomerApi,getCustomersubjectApi } from "@s/api";
export default {
  name: "dialogCom",
  props: ["dialogObj"],
  data() {
    return {
      agentStatus: true,
      placeholderTips: placeholderTips,
      userInfo: {},
      form: {
        id: "",
        loginAccount: "",
        loginPassword: "",
        customerName: "",
        customerCode: "",
        customerPhone: "",
        customerEmail: "",
        customerCity: "",
        customerAddress: "",
        customerPostcode: "",
        crawlerPassword: "",
        remark: "",
        crawlerLoginName:'',
        subjectIds: []
      },
      rules: {
        loginAccount: [
          { required: true, trigger: "blur", message: "请输入账号" },
          { validator: validateUserName }
        ],
        loginPassword: [
          { required: true, trigger: "blur", message: "请输入密码" },
          { validator: validateUserPassword }
        ],
        customerName: [
          { required: true, trigger: "blur", message: "请输入客户名称" },
          { validator: validateName }
        ],
        customerEmail: [{ validator: validateEmail }],
        customerPhone: [
          { required: true, trigger: "blur", message: "请输入手机号" },
          { validator: validatePhone }
        ],
        isAgent: [
          { required: true, message: "请选择客户状态", trigger: "blur" },
          { validator: validateTemplate }
        ]
      },
      subjectIdList: [],
    };
  },
  methods: {
    initDialog() {
      getCustomersubjectApi().then(res => {
        this.subjectIdList = res
      })
      if (this.dialogObj.id) {
        const subIdTemp = []
        this.form.id = this.dialogObj.id;
        this.form.loginAccount = this.dialogObj.form.loginAccount;
        this.form.loginPassword = this.dialogObj.form.loginPassword;
        this.form.customerName = this.dialogObj.form.customerName;
        this.form.customerCode = this.dialogObj.form.customerCode;
        this.form.customerPhone = this.dialogObj.form.customerPhone;
        this.form.customerEmail = this.dialogObj.form.customerEmail;
        this.form.customerCity = this.dialogObj.form.customerCity;
        this.form.customerAddress = this.dialogObj.form.customerAddress;
        this.form.customerPostcode = this.dialogObj.form.customerPostcode;
        this.form.crawlerPassword = this.dialogObj.form.crawlerPassword;
        this.form.remark = this.dialogObj.form.remark;
        this.form.crawlerLoginName = this.dialogObj.form.crawlerLoginName;
        if(this.dialogObj.form.subjects && this.dialogObj.form.subjects.length > 0) {
          this.dialogObj.form.subjects.map(item =>subIdTemp.push(item.id))
        }
        this.form.subjectIds = [...subIdTemp]
      } else {
        this.form.loginAccount = "";
        this.form.loginPassword = "";
        this.form.customerName = "";
        this.form.customerCode = "";
        this.form.customerPhone = "";
        this.form.customerEmail = "";
        this.form.customerCity = "";
        this.form.customerAddress = "";
        this.form.customerPostcode = "";
        this.form.crawlerPassword = "";
        this.form.agentId = "";
        this.form.crawlerLoginName = "";
        this.form.remark = "";
        this.form.subjectIds = []
      }
      
    },
    sub: _debounce(function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.dialogObj.id) {
            this.updateSub();
          } else {
            this.addSub();
          }
        }
      });
    }),
    updateSub() {
      let json = JSON.parse(JSON.stringify(this.form));
      updateCustomerApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    },
    handleCheckedCitiesChange(val) {
      console.log(val,'vvvv')
    },
    addSub() {
      let json = JSON.parse(JSON.stringify(this.form));
      AddCustomerApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "添加成功！"
        });
      });
    }
  },
  watch: {
    "dialogObj.show"(val) {
      if (val) {
        this.initDialog();
      }
    }
  }
};
</script>
<style scoped lang="scss"></style>
